@charset "utf-8";
@import "color";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}
em,
i {
    font-style: normal
}
ol,
ul {
    list-style: none
}
img {
    -webkit-touch-callout: none;
    border: none;
}
html {
    font-size: 625%;
    -webkit-font-smoothing: antialiased;
    user-select: none
}
body {
    max-width: 960px;
    min-width: 300px;
    margin: auto;
    width: 100%;
    font-family: Helvetica Neue, sans-serif;
    font-size: .13rem;
    color: rgba(0,0,0,0.75);
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
}
#app{
    font-size: .13rem;
    max-width: 960px;
    min-width: 300px;
}
input,
textarea {
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

input[type=checkbox] {
    appearance: checkbox
}
input[type=text], input[type=tel], input[type=password] {
    border: 1px solid transparent;
    border-radius: 0;
}

/*主题颜色*/
.theme-color{
    color: $theme-color;
}
.red {
    color: $red;
}
.red-lt{
    color: $redLight;
}
.green {
    color: $green;
}
.black {
    color: $black;
}
.yellow {
    color: $yellow;
}
.blue {
    color: $blue;
}
.blue-lt{
    color: $blueLight;
}
.purple {
    color: $purple;
}
.grey{
    color: $grey;
}
.grey-lt{
    color: $greyLight;
}
.white {
    color: #fff;
  }

/*背景*/
.bgGreen {
    background-color: $green
}
.bgRed {
    background-color: $red
}
.bgYellow {
    background-color: $yellow
}
.bgPurple {
    background-color: $purple
}
.bgWhite {
    background-color: #ffffff
}
.bgGrey{
    background-color: #f8f8f8;
}
.bgBlue {
    background-color: $blue;
}
.bgTheme{
    background-color: $theme-color;
}

/*按钮*/
.btn {
    display: block;
    width: 90%;
    margin:auto;
    font-size:0.14rem;
    text-align: center;
    margin-top: 0.2rem;
    padding:10px 0 9px 0;
    border-radius: 7px;
    transition: all .05s ease-out;
    opacity: 1;
    color: #fafafa;
    letter-spacing: 1px;
    border: 1px solid transparent;
}
.btn:active{
    opacity: 0.9;
}
.btn.large{
    padding: 13px 0 12px 0;
    font-size: 0.17rem;
}
.btnScale:active {
    transform: scale(.92);
}

.btnDisabled {
    color: #c5c8ce;
    background-color: #f1f1f1;
    border-color: #dcdee2;
}

.btnDefault{
    color: #5c5c5c;
    background-color: #FFF;
    border-color: #ebedf0
}

.bgRed.btnDisabled,
.bgBlue.btnDisabled{
    border-color: transparent;
    color: #fafafa;
}

/*线条按钮*/
.f-btn-line{
    border: 1px solid transparent;
    border-radius: 25px;
}
.f-btn-line.theme-color{
    border-color: $theme-color;
}
.f-btn-line.red{
    border-color: $red;
}
.f-btn-line.small{
    padding: 0.02rem 0.09rem;
    font-size: 0.11rem;
}

/*底部浮动按钮*/
.f-fix-btm{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 998;
}

/*单位*/
.f-w-70{
    width: 0.7rem;
}

/*内外补白*/
.f-p-10{
    padding: 0.1rem;
}
.f-pl-10{
    padding-left: 0.1rem;
}
.f-pr-10{
    padding-right: 0.1rem;
}
.f-ptb-10{
    padding: 0.1rem 0;
}
.f-mt-5{
    margin-top: 5px;
}
.f-m-10{
    margin: 0.1rem;
}
.f-ml-10{
    margin-left: 0.1rem;
}
.f-mr-10{
    margin-right: 0.1rem;
}
.f-mr-20{
    margin-right: 0.2rem;
}
.f-mt-10{
    margin-top: 0.1rem;
}
.f-mt-20{
    margin-top: 0.2rem;
}
.f-mb-20{
    margin-bottom: 0.2rem;
}

.f-line-top,
.f-line-btm{
    position: relative;
}
.f-line-top:after,
.f-line-btm:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    background-color: #eee;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0; 
}
.f-line-top:after{
    top: 0;
}
.f-line-btm:after{
    bottom: 0;
}

/*浮动*/
.clr:after {
    content: '';
    display: table;
    clear: both
}
.fl {
    float: left
}
.fr {
    float: right
}
/*滚动*/
.f-scroll {
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling : touch;
}
/*解决ios，滚动卡顿*/
.f-scroll > .inner{
    position: relative;
    min-height: calc(100% + 1px);
}
/*遮罩*/
.f-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(0,0,0,0.4);
}
/*文字*/
.f-tal {
    text-align: left;
}
.f-tar {
    text-align: right;
}
.f-tac{
    text-align: center;
}
.f-fs-12{
    font-size: 0.12rem !important;
}
.f-fs-16{
    font-size: 0.16rem !important;
}
.f-fs-18{
    font-size: 0.18rem;
}
.f-tdl{
    text-decoration: line-through;
}
.f-tdu{
    text-decoration: underline;
}
.f-tdl-old{
    text-decoration: line-through;
    margin-right: 3px;
    font-size: 10px;
    color: $greyLight;
}
/*伸缩盒*/
.f-flex{
    display: flex;
}
.f-flex.mid{
    align-items: center;
}
.f-flex.center{
    justify-content: center;
}
.f-flex.right{
    justify-content: flex-end;
}
.f-flex.column{
    flex-direction: column;
}
.f-flex.wrap{
    flex-wrap: wrap;
}
.f-flex>.lt,
.f-flex>.auto{
    flex: 1;
}
/*无数据*/
.f-no-data {
    padding: .1rem 0;
    color: $grey;
    text-align: center;
    width: 70%;
    margin:auto;
    font-size: 0.12rem;
    line-height: 1.6;
    >img{
        margin-top: 35%;
        width: 1.2rem;
    }
}
/*文字提示*/
.m-tips{
    width: 90%;
    margin: auto;
    text-align: center;
}
.m-tips img{
    max-width: 240px;
    width: 35%;
    margin:30px 0 15px 0;
}
.m-tips .dp{
    font-size: 0.16rem;
    line-height: 1.5;
}
.m-tips .tips{
    text-align: left;
    line-height: 1.65;
    margin-top: 0.2rem;
    font-size: 0.12rem;
    color: $grey;
}
.m-tips .tips>dt{
    margin-bottom: 5px;
}
/*标签*/
.f-tag-pic {
    padding: 0.12rem 0.1rem;
    >.icon{
        background-position:center;
        background-repeat: no-repeat;
        background-size: 0.2rem;
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 3px;
    }
    >.name{
        font-size: 0.14rem;
    }
}

.f-tag-bg {
    position: relative;
    padding: 0.12rem 0.1rem;
    &:before {
        content: "";
        display: inline-block;
        background-color: $theme-color;
        width: 5px;
        height: 14px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        z-index: 1;
    }
}
/*icon*/
.u-icon-search{
    background-image: url(~@/assets/img/number/icon_search.png);
}
.u-icon-clear{
    background-image: url(~@/assets/img/number/cancel.png);
}
.u-icon-loading{
    background-image: url(~@/assets/img/loading/re.png);
}

/*loading*/
.m-layer-loading{
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.3rem;
}
.m-layer-loading.km{
    background-image: url(~@/assets/img/loading/loading.svg);
}
.m-layer-loading.xiniu{
    width: 0.8rem;
    height: 0.8rem;
    background-image: url(~@/assets/img/loading/xiniu_loading.gif);
    background-size: 0.7rem;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

/*行布局*/
.m-row-box {
    margin: 0.1rem;
    border-radius: 7px;
    overflow: hidden;
}
.m-row-ul {
    margin-left: 0.1rem;
    > li {
        // font-size: 0.14rem;
        padding: 10px 10px 10px 5px;
        position: relative;
        > .rowspan {
            color: #6c6c6c;
            margin-right: 0.1rem;
        }
    }
}
/*行布局里的右箭头*/
.m-row-ul{
    .row-right{
        padding: 0 0 0 5px;
        >.right{
            padding: 0.1rem 0.1rem 0.1rem 0;
            >.u-icon-right{
                width: 0.16rem;
                height: 0.16rem;
                background-position: center;
                background-size: 0.13rem;
                background-repeat: no-repeat;
            }
        }
        >.right:active{
            background-color: #eee;
        }
    }
}
/**/
.f-tag-input, .f-tag-textarea{
    
    >.input-box{
        position: relative;
        >input, >textarea{
            display: block;
            width: 100%;
            height: 0.45rem;
            border: none;
            font-size: 14px;
            background-color: transparent;
            // font-weight: bold;
            
            &:focus + .fake{
                width: 100%;
                border-bottom-color: $theme-color;
            }
        }
        >.fake{
            border: 1px solid transparent;
            width: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            transition: .3s ease-in;
        }
    }
}
.f-tag-input{
    padding: 0 0 0 5px !important;
    >input{
        line-height: 1em;
        padding-right: 0.1rem;
    }
}
.f-tag-textarea{
    >textarea{
        height: auto;
        min-height: 40px;
        line-height: normal;
        max-height: 80px;
        resize: none;
        overflow: hidden;
        padding: 5px 10px 5px 0;
    }
}
/*号码，状态显示，因为是通过v-html渲染，故需要将样式放此*/
.m-status {
    text-align: left;
    .tag{
        font-size: 0.1rem;
        padding: 2px 1px 0 1px;
        border-radius: 2px;
    }
    .yellow{
        background-color: #feecd6;
    }
    .bg-r {
        color: #fff;
    }
}
/*动画*/
@keyframes loading-rotate {
    0%{
        transform: rotate(0deg)
    }
    100%{
        transform: rotate(360deg)
    }
}